<template>
  <div>
    <div ref="print">
      <template v-for="(tableData, index) in props.printingArr" :key="index">
        <table cellpadding="6px" class="tableClass" border-collapse:collapse>
          <tr>
            <!-- <td rowspan="2" width="30%"><img :src="tableData.Twocode"></td> -->
            <!-- <td rowspan="2" width="30%"><img src="" /></td> -->
            <td rowspan="2" width="30%"><img :src="tableData.Twocode"></td>
            <td>条码</td>
            <td colspan="3">{{ tableData.barcode }}</td>
          </tr>
          <tr>
            <td>供应商单号:</td>
            <td colspan="3">{{ tableData.supplierOrder }}</td>
          </tr>
          <tr>
            <td>物料代码</td>
            <td colspan="3">{{ tableData.fmaterialid }}</td>
            <td>数量:80</td>
          </tr>
          <tr>
            <td>物料名称</td>
            <td colspan="4">{{ tableData.fmaterialname }}</td>
          </tr>
          <tr>
            <td>物料代码</td>
            <td colspan="4">{{ tableData.fsupplierid_number }}</td>
          </tr>
        </table>
      </template>
    </div>

    <el-button type="warning" @click="handleClick">确认打印</el-button>
  </div>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import { getLodop } from '/admin/utils/LodopFuncs'
const props = defineProps({
  printingArr: Array,
})

console.log('打印页面', props.printingArr)
const print = ref()
const handleClick = () => {
  const LODOP = getLodop()
  LODOP.PRINT_INIT('')
  // const content = ``;
  //  LODOP.ADD_PRINT_TEXT(50, 50, '60%', 30, content);

  // // LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, 'A4'); // 纸张方向大小
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 800, 800, '') // 演示设置各种样式的打印预览窗口：
  const htmlCode = print.value.innerHTML
  const styleCode =
    '<style>table {margin:0 auto ;text-align: center; border-collapse: separate; border-spacing: 0; } th { border: 1px solid black; padding: 8px; } td { border: 1px solid black; padding: 8px; }</style>'
  // print为要打印的html ID名称：
  LODOP.ADD_PRINT_HTM(20, 0, '100%', '100%', styleCode + htmlCode)
  //   直接打印
  // LODOP.PRINT()
  // 设计模式
  //  LODOP.PRINT_DESIGN()
  LODOP.PREVIEW() // 打印预览
}
</script>

<style scoped>
table {
  margin-bottom: 30px;
}
table,
table td {
  width: 400px;
  border-collapse: collapse;
  border: 1px solid #000;
}

img {
  display: inline-block;
  width: 90%;
}
</style>
  